<template>
  <div class="m-y-10 flex">
    <el-avatar class="m-l-16 m-r-10 shrink-0" :src="currentUser.avatar"/>
    <div>
      <div v-if="!isReplyMainFloor">
        回复&nbsp;
        <router-link :to="`/${$rp.USERS}/${receiveUserId}`" target="_blank" class="at-user">
          @{{ receiveUserNickname }}
        </router-link> :
      </div>
      <div class="m-y-10 flex">
        <el-input
          ref="content"
          type="textarea"
          :rows="3.5"
          v-model="content"
          class="no-resize m-r-10 bilibili"
          :disabled="isLoading"
          :id="id"
          style="width:748px"
        />
        <el-button
          type="primary"
          class="line-height-normal"
          @click="onSubmit"
          :loading="isLoading"
          style="min-width: 70px;"
          :disabled="contentEmpty"
        >
          <template v-if="!isLoading">发表<br />评论</template>
        </el-button>
      </div>
      <div>
        <el-popover placement="bottom" width="400" trigger="click">
          <emoji @emoji="handleEmoji" />
          <el-button slot="reference" size="mini" round>
            <svg-icon icon-name="emoji"/>&nbsp;表情
          </el-button>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import * as format from './format';

export default {
  name: 'FloorReply', // 楼层回复
  props: {
    placement: { // 是哪个位置调用了评论区，楼中楼回复看似不需要实际在获取讨论个数的时候需要
      type: String,
      required: true,
    },
    placementId: { // 调用的位置的id
      type: Number,
      required: true,
    },
    floorCommentId: { // 这层楼的评论内容的id
      type: Number,
      required: true,
    },
    receiveCommentId: { // 被回复的评论id
      type: Number,
      default: undefined,
    },
    receiveUserId: { // 被回复的用户id
      type: Number,
      required: true,
    },
    receiveUserNickname: { // 被回复的用户昵称
      type: String,
      required: false,
    },
  },
  data() {
    return {
      content: '', // 评论内容
      isLoading: false, // 正在发表评论
      id: new Date().getTime(),
    };
  },
  computed: {
    ...mapState(['currentUser']),
    contentEmpty() { return !this.content.trim(); },
    // 是不是回复主楼
    isReplyMainFloor() { return this.floorCommentId === this.receiveCommentId; },
    // 生成发表评论所需数据
    initCreateParams() {
      return {
        placement: this.placement, // 回复地点
        placementId: this.placementId, // 回复地点的id
        mainFloorId: this.floorCommentId, // 当前主楼id
        receiveCommentId: this.receiveCommentId, // 回复的是哪个评论
        receiveUserId: this.receiveUserId, // 被回复人的id
        replySubFloor: !this.isReplyMainFloor, // 是不是回复楼中楼
        content: this.content, // 回复内容
      };
    },
  },
  methods: {
    // 发表评论
    onSubmit() {
      if (this.contentEmpty) return; // 内容为空时不评论
      this.isLoading = true;
      this.$api.comments.create(this.initCreateParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 处理返回的数据
    handleRes(res) {
      this.$message.success('发表成功');
      this.content = '';
      this.$emit('commentSuccess', format.formatComment(res.data));
    },
    onFocus() { this.$refs.content.focus(); },
    handleEmoji(item) {
      const inputArea = document.getElementById(this.id);
      function changeSelectedText(obj, str) {
        if (window.getSelection) {
          inputArea.setRangeText(str);
          inputArea.selectionStart += str.length;
          inputArea.focus();
        } else if (document.selection) {
          obj.focus();
          const sel = document.selection.createRange();
          sel.text = str;
        }
      }
      changeSelectedText(inputArea, item);
      this.content = inputArea.value;
    },
  },
};
</script>

<style></style>
